<!--
 * @Description: 角色授权
 * @Author: 黄勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-04-08 10:32:26
 * @LastEditors: 黄勇
 -->
<template>
    <div class="role">
        <div class="main-content table-pagination">
            <el-table
                ref="roleTable"
                :data="roleList"
                tooltip-effect="dark"
                style="width: 100%;"
                header-row-class-name="header-row"
                :height="maxHeight"
                :max-height="maxHeight"
            >
                <el-table-column
                    type=""
                    width="20"
                >
                </el-table-column>
                <el-table-column
                    prop="roleId"
                    label="角色编号"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="roleName"
                    label="角色名称"
                    width="120"
                    :show-overflow-tooltip="true"
                >
                </el-table-column>
                <el-table-column label="功能资源">
                    <template slot-scope="scope">
                        <router-link
                            class="cursor-pointer table-hover-blue"
                            v-for="(item, index) in scope.row.menuArr"
                            :to="item.routerPath"
                            :key="index"
                        >
                            {{item.title}}
                            <span v-if="index !== (scope.row.menuArr.length - 1) ">/</span>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column
                    label="类型"
                    width="120"
                >
                    <template slot-scope="scope">
                        <app-status
                            :type="staticType.getStaticTypeLabel('appStatusType', scope.row.statusFlag)"
                            :text="staticType.getStaticTypeLabel('statusType', scope.row.statusFlag)"
                        >
                        </app-status>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="userText"
                    label="用户"
                >
                </el-table-column>

            </el-table>
            <el-pagination
                :current-page="pageNum"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="->, total, sizes, prev, pager, next, jumper"
                :total="totalNum"
                style="padding: 15px 20px;"
                @size-change="size => pageSize = size"
                @current-change="num => pageNum = num"
            >
            </el-pagination>

        </div>
    </div>
</template>

<script>
import AppStatus from "@/components/AppCommon/AppStatus";

import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("common");
import { totalPageSize, totalPageSizes } from "../../utils/tool";

export default {
    name: "role",
    components: {
        AppStatus
    },
    computed: {
        ...mapState(["menu"])
    },
    data: () => ({
        roleList: [],
        pageSize: totalPageSize,
        pageNum: 1,
        totalNum: 0,
        pageSizes: totalPageSizes,
        maxHeight: 0
    }),
    created() {
        this.getTableMaxHeight();
        window.onresize = () => {
            this.getTableMaxHeight();
        };
        this.getRoleList();
    },
    mounted() {},
    beforeDestroy() {
        window.onresize = null;
    },
    watch: {
        pageSize() {
            this.roleList = [];
            if (this.pageNum == 1) {
                this.getRoleList();
            } else {
                this.pageNum = 1;
            }
        },
        pageNum() {
            this.roleList = [];
            this.getRoleList();
        }
    },
    methods: {
        // 获取角色列表
        getRoleList() {
            this.api
                .getRoleList(
                    {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum
                    },
                    {
                        loading: true
                    }
                )
                .then(res => {
                    let data = res.data;
                    this.totalNum = Number(data.total) || 4;
                    let list = data.list || [];
                    list = list.map(item => {
                        item.menuArr = this.getMenuArr(item.menus || []);
                        let usersArr = [];
                        if (item.users && item.users.length) {
                            usersArr = item.users.map(u => {
                                if (u) {
                                    return (
                                        (u && u.username) ||
                                        u.realname ||
                                        u.petname
                                    );
                                }
                            });
                        } else {
                            usersArr = [];
                        }
                        item.userText = usersArr.join("、");
                        return item;
                    });
                    this.roleList = list || [];
                })
                .catch(err => {});
        },
        getMenuArr(data) {
            let res = [];
            let arr = [];
            this.menu.forEach(item => {
                arr = arr.concat(item.children);
            });
            data &&
                data.length &&
                data.forEach(item => {
                    let router = arr.find(m => m.routerPath === item.menuCode);
                    router && res.push(router);
                });
            return res;
        },
        getTableMaxHeight() {
            let height = window.innerHeight;
            this.maxHeight = height - 100;
        }
    }
};
</script>
